<template>
	<div>
		<newDialog :title="title" :isShowBtn='isShowBtn' :dialogVisible="dialogVisible" newWidth="40%" :ensureLoading='ensureLoading'
		 @closeDialog='closeDialog' @submitDialog='submitDialog' class='setQue'>
			<div slot='content'>
				<el-form :model="form" ref='form' size="mini" :rules="rules" v-loading='isLoading' label-width="120px">
					<div v-if="title == '新建模式' || title == '编辑模式' || title == '模式详情'">
						<el-row>
							<el-col :span="15">
								<el-form-item label="播放模式:">
									<el-select @change="changeMode" :disabled="!isShowBtn" v-model="form.playMode" placeholder="请选择播放模式"
									 filterable clearable>
										<el-option v-for="item in playModeArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="form.playMode == '0' || form.playMode == '2' ">
							<el-col :span="15">
								<el-form-item label="视频名称:">
									<el-select :disabled="detailDisable" v-model="form.videoName" placeholder="请选择视频名称" filterable clearable>
										<el-option v-for="item in videoNameArr" :label="item.name" :value="item.id" :key='item.id'></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="15">
								<el-form-item label="播放时间:">
									<el-input clearable v-model="form.videoTime" placeholder="请输入播放时间" :disabled="detailDisable"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="15">
								<el-form-item label="开始时间:">
									<el-time-select format='mm:ss' value-format='mm:ss' @change="changeTime" :picker-options="{
						  start: '00:00',
						  step: '00:10',
						  end: '23:59'
						}"
									 v-model="form.startTime" clearable placeholder="请选择开始时间" disabled>
									</el-time-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="15">
								<el-form-item label="结束时间:">
									<el-time-select format='mm:ss' value-format='mm:ss' :picker-options="{
												  start: form.startTime,
												  step: '00:10',
												  end: '23:59'
												}"
									 v-model="form.endTime" clearable placeholder="请选择结束时间" disabled>
									</el-time-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="15">
								<el-form-item label="播放日期:">
									<el-date-picker v-model="form.openVideoTime" type="daterange" range-separator="到" start-placeholder="开始日期"
									 end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :disabled="detailDisable">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div v-if="title == '新建图片'">
						<el-row>
							<el-col :span="15">
								<el-form-item label="图片名称:">
									<el-select @change="changeMode" v-model="form.picName" placeholder="请选择图片名称" filterable clearable>
										<el-option v-for="item in videoNameArr" :label="item.name" :value="item.id" :key='item.id'></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="15">
								<el-form-item label="保持秒数:">
									<el-input clearable v-model="form.seconds" placeholder="请输入保持秒数" :disabled="!isShowBtn"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<el-row>
						<el-col :span="15">
							<el-form-item label="备注:">
								<el-input clearable :disabled="!isShowBtn" v-model="form.picDes" type="textarea" resize="none" :rows="5"
								 placeholder="请输入备注"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</newDialog>
		<el-dialog custom-class="imgDialogShow" :visible.sync="imgDialogShow" :append-to-body='true' :before-close='closeImg'>
			<img :src="dialogImgUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import newDialog from '@/components/publicComponents/dialogComp.vue'
	export default {
		components: {
			newDialog
		},
		props: {
			dialogVisible: {
				type: Boolean,
				default () {
					return false
				}
			},
			title: {
				type: String,
				default () {
					return '提示'
				}
			},
			rowId: {
				type: Number,
				default () {
					return 0
				}
			},
			currentMode: {
				type: String,
				default () {
					return '10'
				}
			}
		},
		mounted() {
			if (this.title == '模式详情') {
				this.isShowBtn = false
			} else {
				this.isShowBtn = true
			}
			if (this.title != '新建图片' && this.title !== '新建模式') {
				this.getCompList()
			}
			if (this.currentMode && this.title == '新建图片') {
				this.form.playMode = this.currentMode
				this.changeMode()
			}
		},
		data() {
			return {
				ensureLoading: false,
				isShowBtn: false,
				videoNameArr: [],
				fileList: [],
				fileList1: [],
				isLoading: false,
				endTimeDis: true,
				playModeArr: [{
						label: '纯视频',
						value: '0'
					}, {
						label: '1/3视频',
						value: '2'
					},
					{
						label: '纯图片',
						value: '3'
					}, {
						label: '1/2图片',
						value: '4'
					}
				],
				terminalArr: [{
					label: '单屏',
					value: '0'
				}, {
					label: '双屏',
					value: '1'
				}],
				form: {
					playMode: '',
					videoCode: '',
					videoName: '',
					videoTime: '',
					startTime: null,
					endTime: null,
					openVideoTime: '',
					picCode: '',
					picName: '',
					seconds: '',
					picDes: ''
				},
				rules: {

				},
				imgDialogShow: false,
				dialogImgUrl: ''
			}
		},
		computed: {
			BroadcastManageId() {
				if (localStorage.BroadcastManageId) {
					return JSON.parse(localStorage.BroadcastManageId).id
				} else {
					return ''
				}
			},
			showPic() {
				if (this.form.playMode === '') {
					return false
				} else {
					if (this.form.playMode === '0' || this.form.playMode === '1' || this.form.playMode === '2') {
						return false
					} else {
						return true
					}
				}
			},
			detailDisable() {
				if (this.form.playMode) {
					return false
				} else {
					return true
				}
			},
		},
		methods: {
			getCompList() {
				this.isLoading = true
				let url = '/res/queue/material/' + this.rowId + '/'
				this.axiosGet(url, '', (res) => {
					this.isLoading = false
					if (res.code == 0) {
						this.form.playMode = res.detail.play_mode
						let value = ''
						if (res.detail.resources.length != 0) {
							value = res.detail.resources[0].resource_id
						}
						this.changeMode(value)
						this.form.videoTime = res.detail.play_time
						this.form.startTime = res.detail.start_time
						this.form.endTime = res.detail.end_time
						this.form.openVideoTime = [res.detail.start_day, res.detail.end_day]
						this.form.picDes = res.detail.qdesc
						this.form.retention_time = res.detail.retention_time
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			changeMode(value) {
				if (!value) {
					this.isLoading = true
				}
				let params = {
					play_mode: this.form.playMode,
					page: 1,
					page_size_count: 999
				}
				this.axiosGet('/res/queue/material/resource/', params, (res) => {
					this.isLoading = false
					if (res.code == 0) {
						if (value) {
							this.form.videoName = value
						} else {
							this.form.videoName = ''
						}
						this.videoNameArr = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			changeTime(val) {
				this.form.endTime = ''
				if (val) {
					this.endTimeDis = false
				} else {
					this.endTimeDis = true
				}
			},
			upLoadChange(file, fileList) {
				this.fileList = fileList.slice(-1);
			},
			upLoadPreview1(file) {
				console.log(file)
				this.imgDialogShow = true
				this.dialogImgUrl = file.url
			},
			closeImg() {
				this.imgDialogShow = false
			},
			upLoadChange1(file, fileList) {
				const isLt2M = file.size / 1024 < 800;
				if (file.name.split(".")[1] != "jpg" && file.name.split(".")[1] != "png" && file.name.split(".")[1] != "jpeg") {
					this.$message.error('只能上传JPG/PNG/JPEG格式图片');
					this.fileList1 = fileList.slice(0, -1);
					return
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 800kb!,请重新上传');
					this.fileList1 = fileList.slice(0, -1);
					return
				}
				this.fileList1 = fileList.slice(-10);
			},
			upLoadRemove(file, fileList) {
				this.fileList = fileList;
			},
			upLoadRemove1(file, fileList) {
				this.fileList1 = fileList;
			},
			closeDialog() {
				this.$emit('closeMask')
			},
			submitDialog() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.ensureLoading = true
						let url = ''
						let method = ''
						let data = ''
						data = {
							play_time: this.form.videoTime,
							play_queue: this.BroadcastManageId,
							play_mode: this.form.playMode,
							resource_id: this.form.videoName,
							start_time: this.form.startTime,
							end_time: this.form.endTime,
							start_day: this.form.openVideoTime.length != 0 ? this.form.openVideoTime[0] : null,
							end_day: this.form.openVideoTime.length != 0 ? this.form.openVideoTime[1] : null,
							qdesc: this.form.picDes,
							files: this.form.picName,
							retention_time: this.form.retention_time
						}
						if (this.title == '新建模式') {
							url = '/res/queue/material/'
							method = 'post'
						} else if (this.title == '新建图片') {
							url = '/res/queue/material/relation/'
							method = 'post'
							data = {
								material: this.rowId, // 模式的id
								resource: this.form.picName, // 资源的id
								retention_time: Number(this.form.seconds) // 保留时间
							}
						} else if (this.title == '编辑模式') {
							url = '/res/queue/material/' + this.rowId + '/'
							method = 'put'
						}

						this.axiosChange(url, method, data, (res) => {
							this.ensureLoading = false
							if (res.code == 0) {
								this.$message.success('操作成功')
								this.$emit('submitDialog')
							} else {
								this.$message.error(res.detail.result)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style>
</style>
